---
import { Image } from 'astro:assets';
import Houston from '~/assets/houston_astronaut.png';
import NotFoundSvg from '~/assets/not_found.png';

interface Props {
	lang: string;
}
const { lang } = Astro.props;
---

<div class="wrapper">
	<Image class="galaxy" src={NotFoundSvg} alt="" loading="eager" />
	<Image class="houston" src={Houston} alt="" loading="eager" width="192" />
	<div class="hero-text">
		<h1>404</h1>
		<p>{Astro.locals.t('404.content')}</p>
		<a href={`/${lang}/`}>{Astro.locals.t('404.linkText')}</a>
	</div>
</div>

<style is:global>
	main .content-panel:first-child {
		display: none;
	}
</style>
<style>
	.wrapper {
		margin: -1.5rem calc(-1 * var(--sl-content-pad-x));
		padding-block: 1.5rem;
		display: grid;
		grid-template: 100% / 100%;
		overflow: hidden;
	}
	.wrapper > * {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
		place-self: center;
	}

	.galaxy {
		min-height: 45rem;
		object-fit: cover;
	}
	.houston {
		width: 8rem;
		transform: translate(0, -12rem);
		filter: drop-shadow(0 0 3px var(--sl-color-gray-4));
	}

	@media (min-width: 50rem) {
		.houston {
			transform: translate(-20rem, 0);
		}
	}
	@media (prefers-reduced-motion: no-preference) {
		.houston {
			animation: float-mobile 5s ease-in-out infinite;
		}
		@media (min-width: 50rem) {
			.houston {
				animation: float 5s ease-in-out infinite;
			}
		}
	}
	.hero-text {
		text-align: center;
		padding: 0 1rem;
		color: hsl(224, 6%, 77%);
	}
	.hero-text h1 {
		font-size: 6rem;
		color: white;
	}
	.hero-text p {
		font-size: var(--sl-text-xl);
	}

	:global([data-theme='light']) a,
	:global([data-theme='light']) a:hover {
		color: white;
	}

	@keyframes float-mobile {
		50% {
			transform: translate(0, -12.25rem) rotate(3deg);
		}
	}
	@keyframes float {
		50% {
			transform: translate(-20rem, -0.25rem) rotate(3deg);
		}
	}
</style>

<script>
	window.addEventListener('load', () => (window as any).fathom.trackGoal('4KN9VI2W', 0));
</script>
